<template>
  <div class="page-echart">
    <div class="m-header">
      <div class="btn-lf">
        <MBtnGroup :list="btnLeft"></MBtnGroup>
      </div>
      <div class="title-box">
        <div class="title">Echarts 案例</div>
      </div>
      <div class="btn-rt">
        <MBtnGroup :list="btnRight" :rt="true"></MBtnGroup>
      </div>
    </div>
    <div class="m-content">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnLeft: [
        {
          name: '柱状图',
          to: '/echart/bar'
        },
        {
          name: '折线图',
          to: '/echart/line'
        },
        {
          name: '饼图',
          to: '/echart/pie'
        },
      ],
      btnRight: [
        {
          name: '雷达图',
          to: '/echart/radar'
        },
        {
          name: '地图',
          to: '/echart/map'
        }
      ],
    }
  }
}
</script>

<style scoped lang="less">
.page-echart {
  display: flex;
  flex-direction: column;
  height: 100%;
  .m-header {
    width: 100%;
    height: 100px;
    padding-bottom: 30px;
    .bg-image('../../common/images/header-bg');
    background-size: auto 100%;
    display: flex;
    align-items: center;
    .title-box {
      height: 100%;
      .title {
        line-height: 70px;
        padding: 0 20px;
        min-width: 700px;
        text-align: center;
        font-size: 46px;
        font-weight: 600;
        background: linear-gradient(0deg, #FFFFFF 0%, #12FFEB 0%, #20A8FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .btn-lf {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      flex-flow: row-reverse;
    }
    .btn-rt {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
  .m-content {
    flex: 1;
    position: relative;
    > * {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
}

</style>
